<template>
  <div class="shuffling">
    <ul>
        <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
            <a :href="list.clickUrl" >
                <img :src="list.image" :alt="list.desc">
            </a>
        </li>
    </ul>
    <div class="carousel-items">
        <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
    </div>
  </div>
</template>


<script>
export default {
  components: {

  },
  methods: {
    created() {
        this.$nextTick(() => {
            this.timer = setInterval(() => {
                this.autoPlay()
            }, 4000)
        })
    },
    go() {
        this.timer = setInterval(() => {
            this.autoPlay()
        }, 4000)
    },
    stop() {
        clearInterval(this.timer)
        this.timer = null
    },
    change(index) {
        this.currentIndex = index
    },
    autoPlay() {
        this.currentIndex++
        if (this.currentIndex > this.slideList.length - 1) {
            this.currentIndex = 0
        }
    }
  },
  data() {
    return {
        slideList: [
            {
                "clickUrl": "#",
                "desc": "nhwc",
                "image": "http://dummyimage.com/1745x492/f1d65b"
            },
            {
                "clickUrl": "#",
                "desc": "hxrj",
                "image": "http://dummyimage.com/1745x492/40b7ea"
            },
            {
                "clickUrl": "#",
                "desc": "rsdh",
                "image": "http://dummyimage.com/1745x492/e3c933"
            }
        ],
        currentIndex: 0,
        timer: ''
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
.shuffling{
    width:100%;
    height:100%;
    position:relative;
    ul{
        width:100%;
        height:100%;
        li{
            width:100%;
            height:100%;
            img{
                width:100%;
                height:100%;
            }
        }
    }
}
.carousel-wrap {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

.slide-ul {
  width: 100%;
  height: 100%;
  li {
    position: absolute;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.carousel-items {
  position: absolute;
  z-index: 10;
  bottom: 0.23rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  font-size: 0;
  span {
    display: inline-block;
    height: 0.16rem;
    width: 0.16rem;
    border-radius:50%;
    margin: 0 3px;
    background-color: rgba(255,255,255,0.4);
    cursor: pointer;
  }
  .active {
    background-color: #7FB80E;
  }
}

.list-enter-active {
  transition: all 1s ease;
  transform: translateX(0)
}

.list-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%)
}

.list-enter {
  transform: translateX(100%)
}

.list-leave {
  transform: translateX(0)
}
</style>